<template>
<div class="idLayout">
    <div class="tagsBox">
        <div>
            <span class="title">酒店联系电话</span>
            <el-input v-model="tagsValue.phone" style="width: 300px;" placeholder="输入要查询的手机号"/>
        </div>
        <div>
            <span class="title">投诉时间</span>
            <el-config-provider :locale="zhCn">
                <el-date-picker
                    v-model="tagsValue.time"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="Start"
                    end-placeholder="End"
                    size="default"
                />
            </el-config-provider>
        </div>


        <div class="btn">
            <el-button type="primary" style="width:100%" @click="query">查询</el-button>
            <el-button type="primary" style="width:100%" @click="clear">清空查询</el-button>
        </div>

    </div>

    <el-card style="width:100%">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%;border: none; border-radius: 8px"
            v-loading="loading" 
            element-loading-text="loading..." 
            element-loading-background="white"
        >
            <el-table-column property="order_id" label="订单ID" />
            <el-table-column property="user_name" label="用户" />
            <el-table-column property="user_code" label="手机号" />
            <el-table-column property="hotel_name" label="酒店名称" />
            <el-table-column property="hotel_code" label="酒店联系电话" />
            <el-table-column property="create_time" label="创建时间">
                <template #default="scope">
                    <span>{{ formatYMD(scope.row.create_time) }}</span>
                </template>
            </el-table-column>
            <el-table-column property="content" label="投诉内容"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="lookInfo(scope.row)">查看订单</el-button>
                </template>
            </el-table-column>
            <template #empty>
                    <el-empty description="无数据" />
                </template>
        </el-table>
    </el-card>

    <el-card class="pagination" body-style="padding:0">
        <el-config-provider :locale="zhCn">
            <el-pagination  :page-size="10" 
                            @current-change="changePage"
                            layout="prev, pager, next, jumper" 
                            background 
                            :total="total"
                            prev-text="上一页"
                            next-text="下一页"
                            />
        </el-config-provider>
    </el-card>
</div>
<el-dialog v-model="dialog" title="订单信息">
    <ul class="indentInfo">
        <li>
            <span>订单号</span>
            <el-input disabled :placeholder="indentInfo.id" style="width: 300px"/>
        </li>
        <li>
            <span>用户</span>
            <el-input disabled :placeholder="indentInfo.user_name" style="width: 300px;"/>
        </li>
        <li>
            <span>联系方式</span>
            <el-input disabled :placeholder="indentInfo.user_code" style="width: 300px;"/>
        </li>
        <li>
            <span>酒店名称</span>
            <el-input disabled :placeholder="indentInfo.hotel_name" style="width: 300px;"/>
        </li>
        <li>
            <span>酒店联系电话</span>
            <el-input disabled :placeholder="indentInfo.hotel_code" style="width: 300px;"/>
        </li>
        <li>
            <span>酒店类型</span>
            <el-input disabled :placeholder="indentInfo.type_name" style="width: 300px;"/>
        </li>
        <li>
            <span>客房</span>
            <el-input disabled :placeholder="indentInfo.room_name" style="width: 300px;"/>
        </li>
        <li>
            <span>价格</span>
            <el-input disabled :placeholder="indentInfo.total_price" style="width: 300px;"/>
        </li>
        <li>
            <span>下单时间</span>
            <el-input disabled :placeholder="formatYMD(indentInfo.create_time)" style="width: 300px;"/>
        </li>
        <li>
            <span>入住时间</span>
            <el-input disabled :placeholder="formatYMD(indentInfo.start_time)" style="width: 300px;"/>
        </li>
        <li>
            <span>离宿时间</span>
            <el-input disabled :placeholder="formatYMD(indentInfo.end_time)" style="width: 300px;"/>
        </li>
        <li>
            <span>订单状态</span>
            <el-input disabled :placeholder="indentInfo.order_name" style="width: 300px;"/>
        </li>
    </ul>
</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, onBeforeMount, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { get } from '@/http/axios' 
import { getCookies } from '@/utils/cookies'
import { useUserInfoStore } from '@/store/userInfoState'
import { ElMessage } from 'element-plus'
import { formatYMD } from '@/utils/format'

type kindsType = {
    id:number
    code: string
    name: string
}
let tableData = ref()
const tagsValue = reactive({
    phone: null,
    time: null,
})
let id = ref<number | string>()
const kinds = ref<Array<kindsType>>()
const store = useUserInfoStore()
let loading = ref<boolean>(true)
let indentInfo = ref()
let total = ref<number>(0)
let dialog = ref<boolean>(false)
onBeforeMount(() => {
    id.value = store.user?.id?store.user.id:getCookies('id')
    initData()
    getOrderState()
})
function initData(pageNum: number = 1) {
    get('/complain/queryPage',{
        hotel_code: tagsValue.phone,
        start_time: tagsValue.time?new Date(tagsValue.time[0]).getTime():0,
        end_time: tagsValue.time?new Date(tagsValue.time[1]).getTime():0,
        pageNum,
        pageSize: 10,
    }).then(res => {
        let timer = setTimeout(() => {
            clearTimeout(timer)
            tableData.value = res.result.content
            total.value = res.result.totalCount
            loading.value = false
        },500)
    }).catch(err => {
        ElMessage.error('投诉信息加载失败' + err)
    })
}
function query() {
    loading.value = true
    initData()
}
function getOrderState() {
    get('/orderState/queryAll').then(res => {
        kinds.value = res.result
    })
}
function clear(){
    Object.keys(tagsValue).forEach(el => {
        tagsValue[el] = null
    })
}
function changePage(val:number){
    loading.value = true
    initData(val)
}
function lookInfo(val:any) {
    get('/order/queryId',{
        order_id: val.order_id
    }).then(res => {
        console.log('查看订单',res);
        dialog.value = true
        indentInfo.value = res.result
    })

}
</script>

<style lang="scss" scoped>
@import url(../../assets/css/infoKinds.scss);
@import url(../../assets/css/changePagintoin.scss);
.idLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px;
    @include allBack;
}
.paginationBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-radius: 8px;
}
.btn{
    width: 350px !important;
}
.indentInfo{
    @include flexColumnCenter;
    gap: 10px;
    list-style: none;
    & li{
        @include flexRowCenter;
        gap: 20px;
        white-space: nowrap;
    }
    & li span{
        width: 100px;
        text-align: right;
    }
}
</style>